<template>

  <div class="left-wrap" style="background: #fff;height: 100%; margin-top: 5px;">
    <!--控制按钮显示-->
    <!--添加子节点-->
    <div style="margin:10px" v-if="btnShow" class="btn-wrap">
      <a v-if="this.permissionData[0].dataPermissionAdd !== ''">
        <a-button v-if="this.permissionKeys[0].addKey == '0'" @click="handleTreeAdd(1)" type="primary" style="margin-right: 10px" v-has="this.permissionData[0].dataPermissionAdd">添加子{{this.buttonTitle}}</a-button>
      </a>
      <a v-else>
        <a-button v-if="this.permissionKeys[0].addKey == '0'" @click="handleTreeAdd(1)" type="primary" style="margin-right: 10px" >添加子{{this.buttonTitle}}</a-button>
      </a>
      <!--添加子节点-->
      <a v-if="this.permissionData[0].dataPermissionAdd !== ''">
        <a-button v-if="this.permissionKeys[0].addKey == '0'" @click="handleTreeAdd(2)" type="primary" style="margin-right: 10px" v-has="this.permissionData[0].dataPermissionAdd">添加一级{{this.buttonTitle}}</a-button>
      </a>
      <a v-else>
        <a-button v-if="this.permissionKeys[0].addKey == '0'" @click="handleTreeAdd(2)" type="primary" style="margin-right: 10px" >添加一级{{this.buttonTitle}}</a-button>
      </a>
      <!--编辑节点-->
      <a v-if="this.permissionData[0].dataPermissionEdit">
        <a-button v-if="this.permissionKeys[0].editKey == '1'" @click="handleTreeEdit" type="primary" style="margin-right: 10px" v-has="this.permissionData[0].dataPermissionEdit">编辑{{this.buttonTitle}}</a-button>
      </a>
      <a v-else>
        <a-button v-if="this.permissionKeys[0].editKey == '1'" @click="handleTreeEdit" type="primary" style="margin-right: 10px" >编辑{{this.buttonTitle}}</a-button>
      </a>
      <!--删除节点-->
      <a v-if="this.permissionData[0].dataPermissionDelete">
        <a-button v-if="this.permissionKeys[0].deleteKey == '2'" @click="handleTreeDelete" type="primary" style="margin-right: 10px" v-has="this.permissionData[0].dataPermissionDelete">删除{{this.buttonTitle}}</a-button>
      </a>
      <a v-else>
        <a-button v-if="this.permissionKeys[0].deleteKey == '2'" @click="handleTreeDelete" type="primary" style="margin-right: 10px" >删除{{this.buttonTitle}}</a-button>
      </a>
      <!--刷新-->
      <a v-if="this.permissionData[0].dataPermissionRefresh">
        <a-button v-if="this.permissionKeys[0].refreshKey == '3'" @click="refresh" type="primary" icon="reload" :loading="loading" v-has="this.permissionData[0].dataPermissionRefresh">刷新</a-button>
      </a>
      <a v-else>
        <a-button v-if="this.permissionKeys[0].refreshKey == '3'" @click="refresh" type="primary" icon="reload" :loading="loading" >刷新 </a-button>
      </a>
    </div>
    <div class="tree-wrap">
      <a-col v-if="showSearch">
        <a-input-search @search="onSearch" allowClear style="width:100%;margin-top: 10px;margin-bottom: 5px" :placeholder="placeholder"/>
      </a-col>
      <a-alert type="info" :showIcon="true">
        <div slot="message">
          当前选择：
          <a v-if="currSelected.title">{{ getCurrSelectedTitle() }}</a>
          <a v-if="currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
        </div>
      </a-alert>
      <template v-if="checkable==false">
        <a-tree
          @select="onSelect"
          @rightClick="rightHandle"
          @expand="onexpand"
          show-icon
          :loadedKeys="loadedKeys"
          :loadData="onLoadData"
          :treeData="dataSource"
          :selectedKeys="selectedKeys"
        >
          <a-icon :slot="this.icon[0].slot" :type="this.icon[0].linkType" :style="this.icon[0].style"/>
          <a-icon :slot="this.icon[1].slot" :type="this.icon[1].linkType" :style="this.icon[1].style"/>
        </a-tree>
      </template>
      <template v-else>
        <a-tree
          multiple
          @select="onSelect"
          @rightClick="rightHandle"
          @expand="onexpand"
          show-icon
          checkable
          :checkStrictly="checkStrictly"
          @check="onCheck"
          :loadedKeys="loadedKeys"
          :loadData="onLoadData"
          :treeData="dataSource"
          :selectedKeys="selectedKeys"
          :checkedKeys="checkedKeys"
        >
          <a-icon :slot="this.icon[0].slot" :type="this.icon[0].linkType" :style="this.icon[0].style"/>
          <a-icon :slot="this.icon[1].slot" :type="this.icon[1].linkType" :style="this.icon[1].style"/>
        </a-tree>
      </template>
    </div>
  </div>
</template>

<script>
  import ACol from 'ant-design-vue/es/grid/Col'
  import { AsyncTreeMixin } from '@/mixins/AsyncTreeMixin'
  export default {
    name: 'LoneAsncTree',
    components: { ACol },
    mixins: [AsyncTreeMixin],
    props: {
      initDataFatherFunction:{
        type: Function,
        default: null
      },
      onLoadDataFatherFunction:{
        type: Function,
        default: null
      },
      addFatherFunction:{
        type: Function,
        default: null
      },
      editFatherFunction:{
        type: Function,
        default: null
      },
      deleteFatherFunction:{
        type: Function,
        default: null
      },
      searchKeyWordFunction:{
        type: Function,
        default: null
      },
      refreshFatherFunction:{
        type: Function,
        default: null
      },
      permissionKeys: {
        type: Array,
        required: false
      },
      permissionData: {
        type: Array,
        required: false
      },
      url: {
        type: Object,
        required: true
      },
      childrenUrl: {
        type: String,
        default: null
      },
      buttonTitle: {
        type: String,
        required: true,
        default:'节点'
      },
      dropTrigger: {
        type: String,
        required: false
      },
      placeholder: {
        type: String,
        required: false
      },
      selectedKeyData:{
        type: String,
        required: false
      },
      dbClick:{
        type: String,
        required: false
      },
      icon:{
        type: Array,
        required: false,
        default: ()=>[
          {
            //叶子节点
            slot :'smile',//图标分模块化
            linkType : 'heat-map',//图标类型
            style :'color:green' //图标显示颜色
          },
          {
            //非叶子结点
            slot :'meh',//图标分模块化
            linkType : 'login',//图标类型
            style :'color:blue' //图标显示颜色
          }
        ]
      },
      multiple: {
        type: Boolean,
        required: false
      },
      checkable: {
        type: Boolean,
        required: false
      },
      onCheckKey: {
        type: String,
        required: false
      },
      btnShow: {
        type: Boolean,
        default: true
      },
      //2020年12月17日19点12分 扩展参数控制搜索框显示隐藏
      showSearch:{
        type: Boolean,
        default: true
      }
    },
  }
</script>